Node.js中使用ES Module的两种方式

方式一

​ 使用webpack对源码进行构建，使用babel对js进行处理使其适应于低版本node

依赖：

一、package.json

"devDependencies": {
        "@babel/core": "^7.12.10",
        "@babel/plugin-transform-runtime": "^7.12.10",
        "@babel/preset-env": "^7.12.11",
        "@babel/runtime-corejs3": "^7.12.5",
        "babel-loader": "^8.2.2",
        "webpack": "^5.11.0",
        "webpack-cli": "^4.3.0"
}

npm scripts

"scripts": {
        "build": "webpack",
        "dev": "webpack --watch"
},

二、webpack.config.js配置

const path = require('path');
module.exports = {
    entry: './bin/core.js', // 入口文件
    mode: 'development', // 开发模式，development => 开发模式 production =》 生产模式
    output: { // 输出
        path: path.join(__dirname, '/dist'), // 输出目录
        filename: 'core.js' // 输出的文件名
    },
    target: 'node', // 默认web，因为需要使用到node原生模块，所以需要更改为node
    module: {
        rules: [{ // 配置babel-loader
        test: /\.js$/, // 处理js
        exclude: /(node_modules|dist)/, // 排除node_modules和dist目录
        use: {
          loader: 'babel-loader', // 使用babel对js进行低版本兼容处理
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              [
                '@babel/plugin-transform-runtime',
                {
                  'corejs': 3,
                  'regenerator': true,
                  "useESModules": true,
                  'helpers': true
                }]
            ]
          }
        }
        }]
    }
}

方式二

​ 通过Node原生支持ES Module

步骤一、 更改js文件后缀为.mjs

步骤二、 import js的时候，如import './core';不能省略后缀名，需要写成import './core.mjs';

执行：node --experimental-modules ./bin/index.mjs

步骤三、 由于是实验性质特性，所以需要配置开启 --experimental-modules，否则会报如下错误

internal/modules/cjs/loader.js:821
  throw new ERR_REQUIRE_ESM(filename);
  ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/snail/Desktop/code/lego/imooc-test1-dev/imooc-test1/bin/index.mjs
    at Object.Module._extensions..mjs (internal/modules/cjs/loader.js:821:9)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:839:10)
    at internal/main/run_main_module.js:17:11

开启后会报一个警告，在node版本v14.x.x以后也支持该特性，不会显示警告信息

(node:59215) ExperimentalWarning: The ESM module loader is experimental.